<template>
    <div>
        <Dialog ref="dialog_alert" :title="dialog_alert_title" :msg="dialog_alert_msg"
            @close="dialog_alert_ref?.close()">
            <template #footer>
                <button type="button" class="btn btn-primary" @click="dialog_alert_ref?.close()">确定</button>
            </template>
        </Dialog>

        <Dialog ref="dialog_confirm" :title="dialog_confirm_title" :msg="dialog_confirm_msg"
            @close="dialog_confirm_ref?.close()" @submit="confirm_fn" @cancel="confirm_fn_cancle">
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import Dialog from "./Dialog.vue"
import { ref,useTemplateRef,onMounted } from 'vue';
import { MessageBox } from "../../utils/MessageBox";

const dialog_alert_ref = useTemplateRef<InstanceType<typeof Dialog>>('dialog_alert')
const dialog_confirm_ref = useTemplateRef<InstanceType<typeof Dialog>>('dialog_confirm')
const dialog_alert_title = ref("提示")
const dialog_alert_msg = ref("")
const dialog_confirm_title = ref("提示")
const dialog_confirm_msg = ref("")
let dialog_confirm_fn: (() => void) | null = null
let dialog_confirm_fn_cancle: (() => void) | null = null
onMounted(() => {
    MessageBox.alert_fn = alert
    MessageBox.confirm_fn = confirm
})

function alert(title: string, msg: string) {
    dialog_alert_title.value = title
    dialog_alert_msg.value = msg
    dialog_alert_ref.value?.open()
}
function confirm(title = "", message = "", fn: (() => void)|null, fn_cancle: (() => void)|null) {
    dialog_confirm_title.value = title
    dialog_confirm_msg.value = message
    dialog_confirm_fn = fn
    dialog_confirm_fn_cancle = fn_cancle
    dialog_confirm_ref.value?.open()
}
function confirm_fn() {
    if (dialog_confirm_fn) {
        dialog_confirm_fn()
    }
    dialog_confirm_ref.value?.close()
}
function confirm_fn_cancle() {
    if (dialog_confirm_fn_cancle) {
        dialog_confirm_fn_cancle()
    }
    dialog_confirm_ref.value?.close()

}
defineExpose({
    alert, confirm
})


</script>

<style scoped>

</style>